<template>
  <PageDetail :visible.sync="detailVisible" :noFooter="true">
    <div class="page-container">
      <a-icon v-show="!searchShow" class="open-icon" type="menu-unfold" @click="ocSearch" />
      <div v-show="searchShow" class="container-left">
        <div class="title-box">
          <span>规则筛选</span>
          <a-icon class="close-icon" type="menu-fold" @click="ocSearch" />
        </div>
        <div class="content-box">
          <div class="mt-20">排查类型</div>
          <div class="mt-10">
            <a-radio-group v-model="searchFormData.checkType">
              <a-radio value="1">股权关联</a-radio>
              <a-radio value="2">人员关联</a-radio>
              <a-radio value="3">隐形关联</a-radio>
            </a-radio-group>
          </div>
          <div class="mt-20">范围对象</div>
          <div class="mt-10">
            <a-radio-group v-model="searchFormData.rangeObject">
              <a-radio value="1">高风险品类</a-radio>
              <a-radio value="2">战略供应商</a-radio>
              <a-radio value="3">频繁中标供应商</a-radio>
            </a-radio-group>
          </div>
          <div class="custom-ant mt-20">
            <a-form layout="inline" :labelCol="{style: 'width:90px;'}">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="品类选择">
                    <ASelectList v-model="searchFormData.category" :isHasDict="false" :defaultOption="categoryOption" />
                  </a-form-item>
                </a-col>
              </a-row>
              <hr>
              <a-row>
                <a-col :span="24">
                  <a-form-item label="供应商">
                    <ASelectList v-model="searchFormData.supplier" :isHasDict="false" :defaultOption="supplierOption" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="供应商编号">
                    <a-input v-model="searchFormData.supplierCode"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="企业法人">
                    <a-input v-model="searchFormData.legalPerson"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="手机号码">
                    <a-input v-model="searchFormData.phone"></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
        <div class="footer-box space-btn">
          <a-button type="primary" @click="onSearch">查询</a-button>
          <a-button @click="onReset">重置</a-button>
        </div>
      </div>
      <div class="container-right">
        <div v-show="!isSearch" class="none-box">暂无信息，请选择左侧筛选项</div>
        <div v-show="isSearch" class="right-box">
          <div class="relevance-box">
            <div id="graph"></div>
          </div>
          <div class="result-box">
            <div class="header-box">查询结果</div>
            <div class="content-box">
              <div><span class="title">风险等级：</span><span>高风险</span></div>
              <div class="title mt-10">分析结果：</div>
              <div class="mt-10">
                1、目标企业与（xxx股份有限公司、xxx股份有限公司、xxx股份有限公司、xxx股份有限公司、xxx股份有限公司、xxx股份有限公司、xxx股份有限公司）存在股权关系
              </div>
              <div>
                2、存在股权或人员关联且未声明，涉及串标/围标，3家投标公司实际控制人为同一人。已声明的集团内关联，合作透明且符合合规要求，母公司与其全资子公司参与不同品类招标
              </div>
              <div class="title mt-20">应对策略：</div>
              <div class="mt-10">
                <ul>
                  <li>终止合作，列入黑名单，追溯历史交易是否存在利益输送。</li>
                  <li>向监管机构举报（如涉及围标）。</li>
                  <li>要求供应商签署《关联关系承诺书》，隐瞒关联需承担违约金及法律责任。</li>
                  <li>明确关联交易定价规则（参照市场价或第三方评估）。</li>
                  <li>内部审计：将关联关系排查纳入内审重点，抽查比例≥20%</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </PageDetail>
</template>

<script>
import optionsMixin from '@views/supplier-manage/relevance-check/optionsMixin.js'
export default {
  name: 'RelevanceCheckIndex',
  mixins: [ optionsMixin ],
  components: {
  },
  data() {
    return {
      detailVisible: true,
      searchShow: true,
      searchFormData: {
        checkType: '',
        rangeObject: '',
        category: '',
        supplier: '',
        supplierCode: '',
        legalPerson: '',
        supplier: '',
      },
      isSearch: false,
      graph: null
    }
  },
  mounted() {
    console.log(window.G6, 'G6');
  },
  methods: {
    ocSearch() {
      this.searchShow = !this.searchShow;
      this.initGraph();
    },
    onSearch() {
      this.isSearch = true;
      this.initGraph();
    },
    onReset() {
      this.searchFormData = {
        checkType: '',
        rangeObject: '',
        category: '',
        supplier: '',
        supplierCode: '',
        legalPerson: '',
        supplier: '',
      };
      this.isSearch = false;
    },
    initGraph1() {
      const { Graph } = window.G6;
      const data = {
        nodes: [
          { id: '0', label: '广东盛世机械集团股份有限公司', size: 100 },
          { id: '1', label: '1', size: 100 },
          { id: '2', label: '2', size: 100 },
          { id: '3', label: '3', size: 100 },
          { id: '4', label: '4', size: 100 },
          { id: '5', label: '5', size: 100 },
          { id: '6', label: '6', size: 100 },
          { id: '7', label: '7', size: 100 },
          { id: '8', label: '8', size: 100 },
          { id: '11', label: '11', size: 100 },
          { id: '12', label: '12', size: 100 },
        ],
        edges: [
          { source: '0', target: '1' },
          { source: '0', target: '2' },
          { source: '0', target: '3' },
          { source: '0', target: '4' },
          { source: '0', target: '5' },
          { source: '0', target: '6' },
          { source: '0', target: '7' },
          { source: '0', target: '8' },
          { source: '1', target: '11' },
          { source: '1', target: '12' },
          // { source: '2', target: '3' },
          // { source: '4', target: '5' },
          // { source: '4', target: '6' },
          // { source: '5', target: '6' },
        ],
      };
      const graph = new Graph({
        container: 'graph',
        data,
        node: {
          style: {
            // size: (d) => d.size,
            labelText: (d) => d.label,
            labelPlacement: 'middle',
            labelFill: '#fff',
          },
        },
        layout: {
          type: 'd3-force',
          link: {
            distance: 100,
            strength: 2
          },
          collide: {
            radius: 40,
          },
        },
        behaviors: [
          {
            type: 'drag-element-force',
            fixed: true,
          },
        ],
      });
      graph.render();
    },
    initGraph() {
      if (this.searchFormData.checkType === '1') this.graphData = this.graphData1;
      if (this.searchFormData.checkType === '2') this.graphData = this.graphData2;
      if (this.searchFormData.checkType === '3') this.graphData = this.graphData3;
      
      if (this.graph) this.graph.destroy();
      const { Graph } = window.G6;

      // 创建图实例
      this.graph = new Graph({
        container: 'graph',
        padding: [0, 20, 0, 20],
        autoResize: true,
        // 视口配置
        autoFit: 'view',
        data: this.graphData,
        node: {
          style: {
            size: (d) => d.size,
            labelText: (d) => d.label,
            labelFill: '#fff',
            labelFontSize: 8,
            labelLineHeight: 12,
            labelPlacement: 'center',
            labelWordWrap: true,
            labelMaxLines: 3,
            labelMaxWidth: '100%',
          },
        },
        // 边配置
        edge: {
          style: {
            stroke: '#1890FF',
            labelText: (d) => d.label,
            labelFontSize: 8,
          },
        },
        layout: {
          type: 'd3-force',
          link: {
            // distance: (d) => {
            //   // 同一团队内的连接距离更短
            //   if (d.source.team === d.target.team) return 60;
            //   // 不同团队间的连接距离更长
            //   return 200;
            // },
            // strength: (d) => {
            //   // 同一团队内的连接强度更大
            //   if (d.source.team === d.target.team) return 0.7;
            //   // 不同团队间的连接强度更小
            //   return 0.1;
            // },
          },
          // 配置碰撞力 - 防止节点重叠
          collide: {
            strength: 0.5,
          },
        },
        // 交互行为
        behaviors: [],
        animation: true,
      });

      this.graph.render();
    },
  }
}
</script>

<style lang="less" scoped>
.page-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  color: rgba(16, 16, 16, 1);
}

.open-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  cursor: pointer;
}

.container-left {
  width: 350px;
  flex: 0 0 auto;
  position: relative;
  .title-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 0 16px;
    background-color: rgba(239, 246, 253, 1);
    .close-icon {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }
  .content-box {
    height: 100%;
    padding: 45px 20px 50px;
    border: 1px solid rgba(187, 187, 187, 1);
    border-top: 0;
  }
  .footer-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    border-radius: 0px 0px 0px 8px;
    background-color: rgba(31, 127, 227, 0.08);
    border-top: 1px solid rgba(204, 204, 204, 1);
  }
}

.container-right {
  flex: 1 1 auto;
  margin: 20px;
  .none-box {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border-radius: 4px;
    background-color: rgba(245, 246, 248, 1);
    border: 1px solid rgba(187, 187, 187, 1);
  }
  .right-box {
    display: flex;
    .relevance-box {
      flex: 5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .result-box {
      flex: 3;
      max-width: 400px;
      .header-box {
        height: 50px;
        line-height: 50px;
        padding: 0 16px;
        border-radius: 4px 4px 0px 0px;
        background-color: rgba(239, 246, 253, 1);
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);

        position: relative;
        z-index: 2;
      }
      .content-box {
        border-radius: 4px;
        background-color: rgba(245, 246, 248, 1);
        padding: 20px 20px;
        color: rgba(108, 108, 108, 1);
        .title {
          font-weight: bold;
        }
        ul {
          padding: 0 16px;
        }
      }
    }
  }
}

</style>